<template>
	<div>
		<div id="difficultpie"></div>
		<div id="difficultbar"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';
	import '../../node_modules/echarts/theme/vintage.js';
	import data from 'static/data/data.json';
	import bus from '../bus.js'
	import axios from 'axios'
	import newData from 'static/data/newData.json'
	var myPie = null
	var myBar = null
	export default {
		data() {
			return {
				chart: null,
				xData:this.$route.params.xdata//路由取参
			};
		},
		props:{
			example:{
				default:function () {
					return []
				}
			}
		},
		created() {
		},
		methods: {
			drawpie(id, radius, centery) {
				console.log(this)
				this.chart = echarts.init(document.getElementById(id), 'vintage');
				myPie = echarts.init(document.getElementById(id), 'vintage');
				this.chart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					toolbox: {
						feature: {
							saveAsImage: {},
							dataView: {}
						},
						right: 15,
						top: 10
					},
					legend: {
						orient: 'vertical',
						left: 5,
						top: 15,
						data: this.xData,
					},
					series: [{
						name: '人数',
						type: 'pie',
						radius: radius,
						center: ['50%', centery],
						data: data.difficult.courseDiff,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffset: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				});
			},
			drawbar(id) {
				this.chart = echarts.init(document.getElementById(id));
				myBar = echarts.init(document.getElementById(id));
				this.chart.setOption({
					backgroundColor: '#faf6f3',
					tooltip: {
						trigger: 'axis',
						formatter: "{a} <br/>{b} : {c}",
						axisPointer: {
							type: 'shadow'
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {},
							dataView: {}
						},
						right: 15,
						top: 10
					},
					grid: {
						top: 65,
						bottom: 30
					},
					xAxis: {
						type: 'value',
						name: '人数',
						nameLocation: 'middle',
						nameGap: 28,
						nameTextStyle: {
							color: '#682d19',
							fontWeight: 200,
							fontSize: 16
						},
						position: 'top',
						splitLine: {
							lineStyle: {
								type: 'solid',
								color: '#cfc3bd'
							}
						}
					},
					yAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							rotate: 0,
							textStyle: {
								color: '#682d19'
							}
						},
						splitLine: {
							lineStyle: {
								type: 'solid',
								color: '#cfc3bd'
							}
						},
						data: data.difficult.course
					},
					series: [{
							name: '人数',
							type: 'bar',
							stack: '课程',
							label: {
								normal: {
									show: true,
									position: 'top'
								}
							},
							barCategoryGap: 0,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
										offset: 0,
										color: 'transparent'
									}, {
										offset: 0.5,
										color: 'transparent'
									}, {
										offset: 0.8,
										color: 'rgba(0, 0, 0, 0.05)'
									}, {
										offset: 0.92,
										color: 'rgba(0, 0, 0, 0.08)'
									}, {
										offset: 1,
										color: 'rgba(0, 0, 0, 0.2)'
									}])
								}
							},
							data: data.difficult.courseData
						},
						{
							type: 'bar',
							stack: '课程',
							silent: true,
							data: [0, 0, 0, 0, 0, 0, 0],
							itemStyle: {
								normal: {
									color: '#ff5a00',
									shadowColor: 'rgba(0, 0, 0, 0.3)',
									shadowBlur: 10,
									shadowOffsetX: -4
								}
							},
							barMinHeight: 4
						}
					]
				});
			}
		},
		mounted() {
			console.log('this is created')
			bus.$on('changeData', target => {
				console.log("已选择" + target);
				console.log(newData)
				console.log(myBar)
					myBar.setOption({
						yAxis: {
							data: newData.difficult.courseDiff
						},
						series: [{
							data: newData.difficult.courseDiff
						}],
					})

			});
			this.$nextTick(function() {
				if(document.body.clientWidth < 420) {
					this.drawpie('difficultpie', '65%', '68%');
				} else {
					this.drawpie('difficultpie', '70%', '60%');
				}
				this.drawbar('difficultbar');
				var that = this;
				var resizeTimer = null;
				window.onresize = function() {
					// console.log(window.screen.availWidth, document.body.clientWidth)
					if(resizeTimer) clearTimeout(resizeTimer);
					resizeTimer = setTimeout(function() {
						if(document.body.clientWidth < 420) {
							that.drawpie('difficultpie', '65%', '68%');
						} else {
							that.drawpie('difficultpie', '70%', '60%');
						}
						that.drawbar('difficultbar');
					}, 100);
				}
			});
		}
	}
</script>

<style scoped>
	#difficultpie,
	#difficultbar {
		position: relative;
		left: 50%;
		width: 90%;
		height: 600px;
		margin-left: -45%;
		border: solid #faf6f3 2px;
		box-shadow: 0 0 10px #F7D098;
		border-radius: 10px;
	}
	
	#difficultbar {
		margin-top: 30px;
	}
	
	@media screen and (max-width: 420px) {
		#difficultpie {
			height: 500px;
		}
	}
</style>